<template>
  <div class="result-list-container">
    <div class="filter-bar">
      <el-input v-model="search" placeholder="搜索结果名称" clearable class="search-input"></el-input>
      <el-date-picker
        v-model="dateRange"
        type="daterange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        class="date-picker"
      ></el-date-picker>
      <el-button type="primary" :icon="Search" @click="handleSearch">搜索</el-button>
    </div>

    <el-table :data="filteredData" style="width: 100%" v-loading="loading">
      <el-table-column prop="name" label="结果名称" width="250"></el-table-column>
      <el-table-column prop="workflowName" label="来源工作流" width="200"></el-table-column>
      <el-table-column prop="creationTime" label="创建时间" sortable width="180"></el-table-column>
      <el-table-column prop="status" label="状态" width="100">
        <template #default="scope">
          <el-tag :type="scope.row.status === '完成' ? 'success' : 'warning'">{{ scope.row.status }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button size="small" @click="handleView(scope.row)">详情</el-button>
          <el-button size="small" type="primary" @click="handleDownload(scope.row)">下载</el-button>
          <el-button size="small" type="success" @click="handleShare(scope.row)">分享</el-button>
          <el-button size="small" type="danger" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      background
      layout="prev, pager, next, jumper, ->, total"
      :total="mockData.length"
      :page-size="10"
      class="pagination"
    ></el-pagination>

    <!-- 弹窗组件 -->
    <ResultDetailDownload v-model="detailVisible" :result="selectedResult" />
    <ResultShareDelete v-model="shareVisible" :result="selectedResult" type="share" />
    <ResultShareDelete v-model="deleteVisible" :result="selectedResult" type="delete" />

  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';
import { Search } from '@element-plus/icons-vue';
import ResultDetailDownload from './ResultDetailDownload.vue';
import ResultShareDelete from './ResultShareDelete.vue';

const search = ref('');
const dateRange = ref([]);
const loading = ref(true);

const mockData = ref([
  { id: 1, name: 'TCGA癌症基因表达差异分析', workflowName: '差异表达分析流程', creationTime: '2023-10-26 10:00:00', status: '完成' },
  { id: 2, name: '单细胞测序数据PCA降维结果', workflowName: '标准单细胞降维聚类', creationTime: '2023-10-25 14:30:00', status: '完成' },
  { id: 3, name: 'GSE12345数据集GO富集分析', workflowName: '功能富集分析流程', creationTime: '2023-10-25 11:20:00', status: '完成' },
  { id: 4, name: '肿瘤微环境细胞通讯分析', workflowName: '细胞通讯高级分析', creationTime: '2023-10-24 18:00:00', status: '进行中' },
  { id: 5, name: '免疫浸润度评估结果', workflowName: '免疫浸润分析', creationTime: '2023-10-23 09:45:00', status: '完成' },
]);

const filteredData = computed(() => {
    return mockData.value; // 暂时返回所有数据，后续可添加过滤逻辑
});

onMounted(() => {
    setTimeout(() => {
        loading.value = false;
    }, 1000);
});

const handleSearch = () => {
    // 实际项目中会根据search和dateRange的值进行筛选
    console.log('Searching...');
}

// 弹窗可见性
const detailVisible = ref(false);
const shareVisible = ref(false);
const deleteVisible = ref(false);
const selectedResult = ref(null);

const handleView = (row) => {
  selectedResult.value = row;
  detailVisible.value = true;
};

const handleDownload = (row) => {
  selectedResult.value = row;
  // 实际下载逻辑可以在详情/下载组件中处理
  detailVisible.value = true; 
};

const handleShare = (row) => {
  selectedResult.value = row;
  shareVisible.value = true;
};

const handleDelete = (row) => {
  selectedResult.value = row;
  deleteVisible.value = true;
};

</script>

<style scoped>
.filter-bar {
  display: flex;
  gap: 15px;
  margin-bottom: 20px;
}
.search-input {
  width: 240px;
}
.date-picker {
  width: 240px;
}
.pagination {
  margin-top: 20px;
  justify-content: flex-end;
}
</style>